'use client'

import Image from 'next/image'
import { Popover, PopoverTrigger, PopoverContent } from '@nextui-org/react'

import filterIcon from '@/public/filter_black.png'
import { usePathname, useSearchParams } from 'next/navigation'
import { useRouter } from 'next-nprogress-bar'

interface TagProps {
  id: string
  label: string
  isSelected: boolean
  onSelect: (id: string) => void
}

const Tag: React.FC<TagProps> = (props) => {
  const { id, label, isSelected, onSelect } = props
  return (
    <div
      className={`text-[0.875rem] leading-[0.875rem] px-[1.09375rem] py-[0.5625rem] mr-[0.9375rem] mb-[0.9375rem] rounded-full ${
        isSelected ? 'text-[#91B01C] bg-[#F4FFC9]' : 'bg-[#F4F4F4]'
      }`}
      onClick={() => onSelect(id)}
    >
      {label}
    </div>
  )
}

interface FilterMobileProps {
  industries: ProductCategory[]

  initialIndustryId: string

  filterLabel: string
  industryLabel: string
  categoryLabel: string
}

const FilterMobile: React.FC<FilterMobileProps> = (props) => {
  const {
    industries,
    initialIndustryId,
    filterLabel,
    industryLabel,
    categoryLabel,
  } = props

  const searchParams = useSearchParams()
  const pathname = usePathname()
  const router = useRouter()

  const selectedIndustryId = searchParams.get('industry') || initialIndustryId
  const currentCategories = [
    { id: 0, title: 'All' },
    ...industries.find((item) => item.id.toString() === selectedIndustryId)
      ?.item!,
  ]
  const selectedCategoryId = searchParams.get('category') || '0'

  const handleTapIndustry = (id: string) => {
    const params = new URLSearchParams(searchParams)
    params.set('industry', id)
    params.set('category', '0')
    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
  }

  const handleTapCategory = (id: string) => {
    const params = new URLSearchParams(searchParams)
    if (id === '0') {
      params.delete('category')
    } else {
      params.set('category', id)
    }
    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
  }

  return (
    <Popover
      aria-label='popover'
      backdrop='opaque'
      placement='bottom-end'
      offset={10}
      classNames={{
        content: ['p-[0.9375rem]'],
      }}
    >
      <PopoverTrigger>
        <button className='lg:hidden flex items-center space-x-1'>
          <div className='relative w-[0.875rem] h-[0.8125rem]'>
            <Image
              src={filterIcon}
              alt='filter icon'
              fill
              sizes='(max-width: 1024px) 10vw'
            />
          </div>
          <div className='text-[0.875rem] text-black leading-[1.1875rem] font-bold'>
            {filterLabel}
          </div>
        </button>
      </PopoverTrigger>
      <PopoverContent>
        <div className='px-1 py-2'>
          <div>
            <div className='text-[#999999] text-[0.875rem] leading-[0.875rem] font-medium'>
              {industryLabel}
            </div>
            <div className='h-3'></div>
            <div className='flex items-center flex-wrap'>
              {industries.map((item) => {
                return (
                  <Tag
                    key={item.id}
                    id={item.id.toString()}
                    label={item.title}
                    isSelected={item.id.toString() === selectedIndustryId}
                    onSelect={handleTapIndustry}
                  />
                )
              })}
            </div>
          </div>
          <div>
            <div className='text-[#999999] text-[0.875rem] leading-[0.875rem] font-medium'>
              {categoryLabel}
            </div>
            <div className='h-3'></div>
            <div className='flex items-center flex-wrap'>
              {currentCategories.map((item) => {
                return (
                  <Tag
                    key={item.id}
                    id={item.id.toString()}
                    label={item.title}
                    isSelected={item.id.toString() === selectedCategoryId}
                    onSelect={handleTapCategory}
                  />
                )
              })}
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}

export default FilterMobile
